<!--
 * @Author: 蔡继周
 * @Date: 2021-11-15 09:14:24
 * @LastEditTime: 2021-11-23 15:35:06
 * @LastEditors: Please set LastEditors
 * @Description: I have to do something...
 * @FilePath: \tableTep\src\components\tableTep\TableMoudle\index.vue
-->
<template>
  <div class="tabCtn cell_large">
    <el-table
      :data="tableDataList"
      style="width: 100%"
      :height="tableConfig.tableHeight"
      :row-key="getRowKeys"
      v-bind="tableConfig.defaultOptions"
      @selection-change="handleSelectionChange"
      @row-dblclick="rowDblclickHandle"
      @row-click="rowClickHandle"
      :row-style="{ height: tableConfig.rowHeight || '' }"
      :cell-style="{
        height: tableConfig.cellHeight || '',
        padding: tableConfig.cellPadding || '',
      }"
      :header-cell-style="{
        background: '#F5F7FA',
        color: '#606266',
        height: tableConfig.headerCellHeight || '',
        padding: '0px',
      }"
    >
      <el-table-column
        v-if="tableConfig.isSelection"
        :reserve-selection="tableConfig.isRemember"
        type="selection"
        align="center"
        width="55"
      />
      <!-- 序号 -->
      <el-table-column
        v-if="tableConfig.showIndex"
        label="序号"
        type="index"
        width="60"
        align="center"
        :index="indexMethod"
      />
      <el-table-column
        v-for="(item, index) in tableHeader"
        :prop="item.prop"
        :label="item.label"
        show-overflow-tooltip
        :width="item.width ? 'item.width' : ''"
        :key="index"
        :align="item.align || 'center'"
      >
        <template #default="scope">
          <span
            v-if="
              item.propDefineClick && typeof item.propDefineClick === 'function'
            "
            @click="linkClick(scope.row, item.propDefineClick)"
          >
            {{ scope.row[item.prop] }}</span
          >
          <span
            v-else-if="item.propDefine && typeof item.propDefine === 'function'"
            v-html="item.propDefine(scope.row)"
          ></span>
          <span v-else>
            {{ scope.row[item.prop] }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        :label="tableConfig.handleOption.handleName"
        :align="tableConfig.handleOption.align || 'center'"
        v-if="tableHandleList.length > 0"
        :width="
          tableConfig.handleOption.width ? tableConfig.handleOption.width : ''
        "
      >
        <template #default="scope">
          <template v-for="(btn, index) in tableHandleList">
            <el-button
              v-if="isShowRule(btn.isShow, scope.row)"
              :key="index"
              v-bind="btn.btnAttr"
              :disabled="disabledRule(btn.disabledRule, scope.row)"
              @click="
                () => {
                  internalInstance.$emit(btn.handle, scope.row);
                }
              "
            >
              {{ btnLabelRule(btn.label, scope.row) }}
            </el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { defineComponent, reactive, getCurrentInstance, toRefs } from "vue";
import { Timer } from "@element-plus/icons";
export default defineComponent({
  name: "TableMoudle",
  components: {
    Timer,
  },
  props: {
    //渲染表格的数据
    tableDataList: {
      type: Array,
      default: () => [],
    },
    //表格基础设置
    tableConfig: {
      type: Object,
      default: () => {
        return {};
      },
    },
    //表头参数
    tableHeader: {
      type: Array,
      default: () => [],
    },
    // 操作配置
    tableHandleList: {
      type: Array,
      default: () => [],
    },
    currentSize: {
      type: Number,
      default: 10,
    },
    currentPage: {
      type: Number,
      default: 1,
    },
  },
  setup(props) {
    const state = reactive({
      multipleSelection: [], //多选选中数组
    });
    const internalInstance = getCurrentInstance().proxy.$parent; //获取父节点
    /**
     * @name: 记住分页多选框选中的数据
     * @param {*} row 当前行数据
     * @return {*}
     */
    const getRowKeys = (row) => {
      return row.id || row.userId || row._id;
    };
    const indexMethod = (index) => {
      return index + 1 + (props.currentPage - 1) * props.currentSize; // 返回表格序号
    };
    /**
     * @name: 多选
     */
    const handleSelectionChange = (val) => {
      state.multipleSelection = val;
      internalInstance.$emit("handleSelectionChange", state.multipleSelection);
    };
    /**
     * @name: 双击当前行事件
     */
    const rowDblclickHandle = (row) => {
      internalInstance.$emit("rowDblclickHandle", row);
    };
    /**
     * @name: 单机当前行事件
     */
    const rowClickHandle = (row) => {
      internalInstance.$emit("rowClickHandle", row);
    };
    /**
     * @name: 动态显示btn
     * @param { Function | boolean } isShow 是否显示
     * @param {*} row 当前行数据
     * @return {*}
     */
    const isShowRule = (isShow, row) => {
      if (isShow === undefined) {
        return true;
      }
      if (typeof isShow === "boolean") {
        return isShow;
      } else if (typeof isShow === "function") {
        return isShow(row);
      } else {
        console.error(
          "isShow 只能传入boolean、function类型，请仔细查阅使用手册"
        );
      }
    };
    /**
     * @name: 判断是否禁用操作按钮
     * @param { Function | boolean | string } disabledRule 页面自定义的判断函数 或 是否禁用 或 只要当前行某个属性为true就禁用
     * @param {*} row 当前行数据
     * @return {*}
     */
    const disabledRule = (disabledRule, row) => {
      if (disabledRule === undefined) return false;
      if (typeof disabledRule === "boolean") {
        return disabledRule;
      } else if (typeof disabledRule === "string") {
        return row[disabledRule];
      } else if (typeof disabledRule === "function") {
        return disabledRule(row);
      } else {
        console.error(
          "disabledRule 禁用方法只能传入boolean、string、function类型，请仔细查阅使用手册"
        );
      }
    };
    /**
     * @name: 动态显示btn名称
     * @param { Function | string } label
     * @param {*} row 当前行数据
     * @return {*}
     */
    const btnLabelRule = (label, row) => {
      if (typeof label === "string") {
        return label;
      } else if (typeof label === "function") {
        return label(row);
      } else {
        console.error("label 只能传入string、function类型，请仔细查阅使用手册");
      }
    };
    const linkClick = (e, fn) => fn(e);
    return {
      internalInstance,
      getRowKeys,
      handleSelectionChange,
      rowDblclickHandle,
      rowClickHandle,
      isShowRule,
      disabledRule,
      btnLabelRule,
      linkClick,
      indexMethod,
    };
  },
});
</script>

<style lang="scss" scoped>
.tabCtn {
  margin: 0 1rem;
  padding: 1rem;
  box-sizing: border-box;
}
// 全局滚动条样式
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-thumb {
  background-color: #a1a3a9;
  border-radius: 3px;
}
//el-table 滚动条样式

.tabCtn {
  &:deep(.el-table__body-wrapper::-webkit-scrollbar) {
    width: 7px;
    height: 7px;
  }
}
.tabCtn {
  &:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
    background-color: #a1a3a9;
    border-radius: 3px;
  }
}
/* 
.cell_large {
  &:deep(.el-table--small .el-table__cell) {
    padding: 85px 0 !important;
  }
}
.cell_middle .el-table__body-wrapper{
  &:deep(.el-table--small .el-table__cell) {
    padding: 8px 0 !important;
  }
}
.cell_small .el-table__body-wrapper{
  &:deep(.el-table--small .el-table__cell) {
    padding: 0px 0 !important;
  }
} */
</style>